<template>
  <view class="whole" :style="{ height: equipment_height }">
    <u-toast ref="uToast" />
    <view style="height: 176rpx">
      <!-- <image src="/static/jiantous.png" alt=""  @click="returns()" class="toplogo"> -->
    </view>
    <view class="login_top">
      <text style="color: #ffffff; font-size: 48rpx; font-weight: bold"
        >欢迎登陆</text
      >
      <!-- <view class="login_top_text">
        <text style="color: #cccccc">还没有账号</text>
        <span class="login_top_register" @click="toregister">，立即注册</span>
      </view> -->
    </view>

    <view class="password_top">
      <!-- <image src="/static/logo.png" alt=""  class="passwordIMG" > -->

      <view class="password" style="display: flex; align-items: center">
        <!-- <u-input v-model="account" /> -->
        <text style="margin-left: 30rpx; color: #1fe7e7; font-size: 28rpx">
          +86</text
        >
        <view
          style="
            width: 2rpx;
            height: 30rpx;
            background-color: #262934;
            margin-left: 15rpx;
          "
        ></view>
        <input
          type="number"
          placeholder="输入手机号"
          v-model="account"
          style="margin-left: 15rpx; font-size: 28rpx; flex: 2"
          placeholder-style="font-size: 28rpx;"
        />
      </view>
      <!-- <view class="passwords">
				<u-field 
				         icon-styl="{color: #ffffff;}"
				         :border-bottom="false"
							v-model="mobile"
							label="手机号"
							placeholder="请填写手机号"
						>
						</u-field>
			</view> -->

      <view class="password" style="margin-top: 30rpx">
        <input
          type="password"
          placeholder="输入密码"
          v-model="password"
          style="margin-left: 30rpx; font-size: 28rpx"
          placeholder-style="font-size: 28rpx;"
        />
      </view>
      <view class="password_top_text" @click="states()">
        <image
          src="/static/circular.png"
          alt=""
          v-if="state"
          class="password_top_img"
        />
        <image
          src="/static/Selected.png"
          alt=""
          class="password_top_img"
          v-if="!state"
        />
        <text>我已阅读并同意</text>
        <text class="passwordBottom" @click="toagreement(1)">《用户协议》</text>
        <text>与</text>
        <text class="passwordBottom" @click="toagreement(2)">《隐私协议》</text>
        <!-- <text>和</text>
				<text class="passwordBottom">《某某协议》</text> -->
      </view>
    </view>

    <view
      style="
        position: relative;
        top: 70rpx;
        right: 60rpx;
        float: right;
        color: #1fe7e7;
      "
      @click="toforget()"
    >
      <text>忘记密码?</text>
    </view>

    <view class="button" @click="Submit">
      <view style="margin-left: 50%; transform: translate(-50%)">
        立即登录
      </view>
    </view>

    <!-- <view class="version">version: {{ version }}</view> -->
  </view>
</template>

<script>
import api from "../../api/api";
import { version } from "@/utils/request.js";
import tip from "@/utils/tip.js";
export default {
  data() {
    return {
      account: "",
      password: "",
      state: true,
      version: version,
      equipment_height: "600px",
    };
  },
  onLoad() {
    uni.getSystemInfo({
      success: (res) => {
        this.equipment_height = res.safeArea.height + "px";
      },
    });
  },
  onShow() {
    this.account = "";
    this.password = "";
    this.state = true;
  },
  methods: {
    toagreement(index) {
      let agreement = "user_agreement";
      if (index == 2) {
        agreement = "privacy_agreement";
        uni.navigateTo({
          url: `../privacy/privacy?key=${agreement}`,
        });
      } else {
        uni.navigateTo({
          url: `../agreement/agreement?key=${agreement}`,
        });
      }
      // plus.runtime.openURL('https://download.senbiaojita.cn/#/?key=user_service_agreement') //这里默认使用外部浏览器打开而不是内部web-view组件打开
      // window.open('https://download.senbiaojita.cn/#/?key=user_service_agreement')
    },
    toforget() {
      uni.navigateTo({
        url: "../forget_password/forget_password",
      });
    },
    states() {
      this.state = !this.state;
    },
    toregister() {
      // uni.navigateTo({
      //   url: "../register/register",
      // });
      uni.redirectTo({
        url: "../register/register",
      });
    },
    returns() {
      uni.navigateBack({
        delta: 1, //返回层数，2则上上页
      });
    },
    async Submit() {
      if (this.account == "") {
        this.$refs.uToast.show({
          title: "请填写手机号",
        });
        return;
      }
      if (!/^1[3456789]\d{9}$/.test(this.account)) {
        this.$refs.uToast.show({
          title: "请填写正确手机号",
        });
        return;
      }
      if (this.password == "") {
        this.$refs.uToast.show({
          title: "请填写密码",
        });
        return;
      }
      if (this.state) {
        this.$refs.uToast.show({
          title: "请先阅读协议",
        });
        return;
      }
      let res = await api
        .login({
          query: {
            type: 1,
            account: this.account,
            password: this.password,
          },
          method: "post",
        })
        .catch((res) => {
          if (res.code == -2) {
            this.$refs.uToast.show({
              title: res.msg,
              type: "error",
            });

            setTimeout(() => {
              uni.navigateTo({
                url: "../forget_password/forget_password",
              });
            }, 1500);
          }
        });

      if (!res) {
        return;
      }

      if (res.code == 0) {
        uni.setStorageSync("token", res.data);
        this.$refs.uToast.show({
          title: "登录成功",
          type: "success",
        });

        new Promise((rs, rj) => {
          setTimeout(() => {
            if (uni.getStorageSync("route")) {
              uni.navigateBack({
                delta: 1, //返回的页面数，如果 delta 大于现有页面数，则返回到首页,
              });
              uni.removeStorageSync("route");
              return;
            }
            uni.switchTab({
              url: "/pages/index/index",
            });

            rs();
          }, 500);
        }).then(async () => {
          let res2 = await api.info({});
          uni.setStorageSync("userInfo", res2.data);
          if (res2.data.is_need_setting_operation_password == 1) {
            tip.defaults("交易密码已失效,请重置");
            setTimeout(() => {
              uni.navigateTo({
                url: `/pages/forget_trading/forget_trading`,
              });
            }, 1500);
            return;
          }
        });
      } else {
        this.$refs.uToast.show({
          title: res.msg,
          type: "error",
        });
      }
    },
  },
};
</script>

<style lang="scss" scope>
@import "../../style/yuanchuang.scss";
.whole {
  background-image: url("/static/background_login.png");
  background-repeat: no-repeat;
  /* background-position: center; */
  background-attachment: fixed;
  /* background-size: cover; */
  background-size: 100%;

  /* -webkit-background-size: cover;
		  -moz-background-size: cover;
		  -o-background-size: cover; */

  width: 100%;
  // height: 100vh;
  background-color: $bg-color1;
}
.login_top {
  display: flex;
  flex-direction: column;
  padding: 20rpx 40rpx;
}
/* span:first-child
	{
	    color:#FFFFFF;
		 font-size: 48rpx;
		 font-weight: bold;
	} */
.login_top_text {
  font-size: 28rpx;
  color: #ffffff;
  margin-top: 20rpx;
}
.login_top_register {
  color: $text-color3;
}
.password_top {
  border: 2rpx solid transparent;
  margin: 0 10rpx;
  //   background-color: #101428;
  border-radius: 25rpx;
  position: relative;
  top: 40rpx;
  font-size: 28rpx;
}
.password {
  /* display: flex;
		justify-content: space-between; */
  /* align-items: center; */
  color: #ffffff;
  margin: -10rpx 30rpx 20rpx;
  /* min-height: 80rpx; */
  padding: 20rpx 0;
  border: 2rpx solid #313535;
  border-radius: 4rpx;
  background: $bg-color4;
}
.passwords {
  /* display: flex;
		justify-content: space-between; */
  /* align-items: center; */
  color: #ffffff;
  margin: -10rpx 30rpx 20rpx;
  /* min-height: 80rpx; */
  padding: -10rpx 0;
  border: 2rpx solid #262934;
  border-radius: 16rpx;
}
.password_center {
  position: relative;
  top: 50rpx;
  color: #999999;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 30rpx;
  font-size: 28rpx;
}
.password_top_text {
  color: #999999;
  margin: 40rpx 30rpx;
  font-size: 24rpx;
  display: flex;
  align-items: center;
}
.button {
  position: relative;
  top: 100rpx;
  margin: 60rpx 40rpx;
  height: 90rpx;
  color: $text-color4;
  background: $button;
  background-repeat: no-repeat;
  background-size: 100%;
  background-repeat: no-repeat;
  background-size: 100%;
  text-align: center;
  line-height: 90rpx;
  font-size: 32rpx;
  border-radius: 16rpx;
}
.password_top_img {
  width: 26rpx;
  height: 26rpx;
  margin-right: 10rpx;
}
.passwordBottom {
  color: $text-color3;
}
.passwordIMG {
  width: 324rpx;
  height: 42rpx;
  margin: 40rpx 40rpx;
  /* -20rpx 40rpx */
}
.passwordText {
  width: 230rpx;
  height: 68rpx;
  margin: 40rpx 40rpx;

  /* width: 80px; */
  /* height: 22px; */
  font-size: 32rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 68rpx;
}
.toplogo {
  width: 50rpx;
  height: 50rpx;
  margin: 100rpx 30rpx;
}
.version {
  position: absolute;
  width: 200rpx;
  left: calc(50% - 100rpx);
  bottom: 30rpx;
  color: #ffffff;
  text-align: center;
}
</style>
